

<!--<html lang="en"> -->
   <!--<html lang="zh-Cn"> --> 
<html>

<head>
    <meta charset="UTF-8">

    <title>xiehao</title>

    <style>
        table, td, th {
            border: 1px solid black;
            border-collapse: collapse;
        }

        td, th {
            width: 100px;
            height: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 表格单元格合并 -->
    <table>
        <thead>
            <tr><!--设计一个表格7天就需要竖列7个表格-->
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
                <th>星期天</th>
            </tr>
        </thead>

        <tbody><!--设计主题栏放在表头，表格内容用body来存放--><!--同样对应表头也是7个纵列-->
            <tr>
                <td>第一节课</td>
                <td rowspan="2">语文</td>
                <td>英语</td>
                 <td rowspan="2" colspan="2">数学</td><!--设计一个行和列都是2的合并单元格 ，先竖着行合并再列行合并-->
                <!-- <td>数学</td> -->
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>第二节课</td>
                <!-- <td>语文</td> -->
                <td>英语</td>
                <!-- <td colspan="2">数学</td> -->
                <!-- <td>数学</td> -->
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>第三节课</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>第四节课</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr> <!--以上都是7个纵列，设计上午四节课和中午午休-->
                <td>午休</td>
                <td colspan="7"></td><!--合并7个纵列为单独一行-->
                <!-- <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td> -->
            </tr>
        </tbody>
    </table>

    <hr>

    <!-- 表格单元格合并 rowspan colspan -->
    <table>
        <thead><!--设计一个表格头部是三列-->
            <tr>
                <th>科目</th>
                <th>题型</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="3">语文</td><!--行合并再列显示-->
                <td>选择题</td>
                <td>20</td>
            </tr>
            <tr>
                <!-- <td>语文</td> --><!--合并之后需要将下部分表格去掉-->
                <td>阅读理解</td>
                <td>30</td>
            </tr>
            <tr>
                <!-- <td>语文</td> -->
                <td>作文</td>
                <td>35</td>
            </tr>
            <tr>
                <!-- 不同行的单元格合并，（同一列的两行合并）rowspan="代表几行" -->
                <td rowspan="2">数学</td>
                <td>填空题</td>
                <td>50</td>
            </tr>
            <tr>
                <!-- <td>数学</td> -->
                <td>简答题</td>
                <td>50</td>
            </tr>
            <tr>
                <!-- 行内单元格合并（同一行的两列合并） colspan="代表几列" -->
                <td colspan="2">合计</td>
                <!-- <td>合计</td> -->
                <td>300</td>
            </tr>
        </tbody>
    </table>
<br>


  <!-- 
            公共属性：
            placeholder: 内容提示
            required: 必须的, 该表单项在表单域中必须要输入
            - readonly: 只读的, 只能显示不能填写
            - disabled: 失效的，禁用的
            * value: 重要，初始化内容
         -->

  <!-- 表单域标签 form
            http://127.0.0.1:5500/xxx/yyy/zzz?password=dfsdfs
            http://127.0.0.1:5500/xxx/yyy/zzz?password=xiaomong diasbled
            http://127.0.0.1:5500/xxx/yyy/zzz?username=xiaoming&password=xiaohong


            http://127.0.0.1:5500/xxx/yyy/zzz?username=xiaoming
            http://127.0.0.1:5500/xxx/yyy/zzz?username=xiaoming&password=xiaohong
        -->

        <form action="/xxx/yyy/zzz">
            文本输入：<input type="text" name="username" placeholder="请输入文本" value="xiehao" required> <br>
            密码输入：<input type="password" name="password" placeholder="请输入密码" value="xiehao" disabled> <br>
            <!-- 两个特殊按钮 提交 重置 -->

            普通按钮：<input type="button" value="普通按钮"> <br>
            重置按钮：<input type="reset" value="重置"> <br>

            <!-- 将当前的各个表单项进行提交，提交到 form 标签的 action 地址上去 -->
            提交按钮：<input type="submit" value="提交按钮"> <br>
            普通按钮：<button>普通按钮（在表单域内部具有提交功能）</button> 
        </form>





        <hr>


        重置按钮：<input type="reset" value="重置2"> <br>
        提交按钮：<input type="submit" value="提交按钮2"> <br>



<br>表单标签</br><br>
文本输入框 <input type="text" placeholder="输入内容"><br> <!--文本type类型和 place设施初始值-->

密码输入框：<input type="password" placeholder="输入密码"><br><!--同样都是文本框-->
数字输入框：<input type="number" max="100" min="0" placeholder="请输入数字"> <br><!--输入标签 定义最大值和最小值-->
数字输入框：<input type="number" placeholder="请输入数字"><br>


日期选择框：<input type="date" placeholder="选择日期"><br>

星期选择框：<input type="week" placeholder="请选择星期"> <br>
星期选择框：<input type="week" placeholder="选择星期"><br>
单选框：<input type="radio" name="gender"> 男 <input type="radio" name="gender"> 女 <br><!--名字相同是同一个输单选框按钮 非此即彼-->
单选框：<input type="radio">男<input type="radio">女<br><!--名字没有统一 可表示不同个-->
多选框：<input type="checkbox" name="hobby"> 游戏 <input type="checkbox" name="hobby"> 学习 <br>
多选框：<input type="checkbox" name="hobby">游戏<input type="checkbox" name="hobby">学习 <br><!--多选框按钮可以多选，不会非此即彼-->
普通按钮：<input type="button" value="确定按钮"> <button>取消按钮（推荐）</button> <br>
普通按钮：<input type="button" value="确定按钮"> 
按钮标签<button>取消按钮（推荐）</button>
文件选择：<input type="file" placeholder="请选择文件"> <br>
文件选择：<input type="file" placeholder="选择文件"><br>
* 下拉选择：
        <select>
            <option>游戏</option> 
            <option>学习</option> 
        </select>
        <br>

        <!-- rows 表示输入框初始状态下有几行 cols 表示一行能输入多少字符 -->
        * 多行文本框：<textarea rows="10" cols="10" placeholder="请输入文本"></textarea> <br>
    </body>
</html>



<select>
<option>游戏</option>
<option>学习</option>

</select>
<br>
多行文本框：<textarea rows="5" cols="5" placeholder="输入文本"></textarea><br>

容器标签使用：<br>
div标签使用：
<div>hello</div><!--占满一行的容器 可以嵌套其他容器标签 更改名字 非此即彼 点击块即刻使用嵌套的输入文本框的标签-->
<div>world</div><!--占满一列的容器，和上面一样-->
<span>hello</span>
<span>world</span>
 <!-- 
            div 

            header
            nav
            aside
            main
            footer

            section
            article
         -->
         <!--         header头部容器标签，意义大于使用
         nav开头导引
         aside侧边栏容器配合section使用
         main文章主题
         article容器专门写文章 配合section使用
         footer适用于文章底部
         section用于文章的菜单，内容章节，专门写文章的主体
         -->


<!--表单标签区别于格标签  table和form-->


 <!-- 
            label
            fieldset
            legend  
         -->

         <form>
            <fieldset>
                <legend>这里是一个标题</legend>

                <label for="username">文本输入框：</label>
                <input name="username" type="text" placeholder="请输入文本">
            </fieldset>
        </form>

<form> 

<fieldset>

    <legend>这是一个标题</legend><!--表单头部标题-->
    <label for="xiehao">文本输入框</label> <!--lael标签点击事件配合input使用-->
    <input type="text"username="输入文本框" id="xiehao">
    
    
    
    <!--与label标签同名 属性文本框 可以并行点击产生时间到文本框内-->


</fieldset>


</form>












</body>

</html>